<template>
  <div style="width:100%;height:100%">
    <div style="height: 50px;">
      <el-row type="flex" :gutter="100" align="bottom">
        <el-col :span="6">
          <el-date-picker
            v-model="startTime"
            type="datetime"
            placeholder="开始时间">
          </el-date-picker>
        </el-col>
        <el-col :span="6">
          <el-select clearable style="width: 150px" v-model="validFlag" placeholder="选择">
            <el-option
              label="通过"
              :value="1">
            </el-option>
            <el-option
              label="未处理"
              :value="0">
            </el-option>
            <el-option
              label="驳回"
              :value="2">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="6">
          <el-button  @click="search" type="primary">搜索结果</el-button>
        </el-col>
      </el-row>
    </div>

    <div style="height: -webkit-calc(100% - 100px);margin-top: 5px">
      <xjr-table @custom-click="handleCourse" :loading="loading" ref="course_table" :list="tableData" :headers="cols"></xjr-table>
    </div>
    <el-dialog  :destroy-on-close="true"  width="30%" title="进度查看" :visible.sync="showDialog">
      <el-timeline>
        <el-timeline-item :timestamp="currentLeave.create" placement="top">
          <el-card>
            <h4>创建 假条</h4>
            <p>{{$store.getters.name}} 提交于 {{currentLeave.create}}</p>
          </el-card>
        </el-timeline-item>
        <el-timeline-item :timestamp="currentLeave.judgeTime" placement="top" v-if="currentLeave.judge">
          <el-card>
            <h4>审核 假条</h4>
            <p>{{currentLeave.judgeName}} 审核于 {{currentLeave.judgeTime}}</p>
          </el-card>
        </el-timeline-item>
        <el-timeline-item :timestamp="new Date().Format('yyyy-MM-dd hh:mm')"  v-if="currentLeave.judge" placement="top">
          <el-card>
            <h4>请假 流程 走完</h4>
            <p>系统 设置 考勤结果</p>
          </el-card>
        </el-timeline-item>
        <el-timeline-item :timestamp="new Date().Format('yyyy-MM-dd hh:mm')"  v-if="!currentLeave.judge" placement="top">
          <el-card>
            <h4>请假 流程 停留</h4>
            <p>{{currentLeave.judgeName}} 还未审核</p>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: "draggableListManager",
    data(){
      return {
        currentLeave:{},
        showDialog:false,
        validFlag:'',
        endTime:new Date(),
        startTime:'',
        loading:false,
        tableData:[],
        cols:[{prop:'studentNo',label:'学生编号',sort:false,hidden:true},
          {prop:'leaveStartTime',label:'请假开始时间',sort:false,hidden:false,dataType:'date'},
          {prop:'leaveEndTime',label:'请假结束时间',sort:false,hidden:false,dataType:'date'},
          {prop:'leaveReason',label:'请假理由',sort:false,hidden:false},
          {prop:'judgeName',label:'审核者',sort:false,hidden:false},
          {prop:'leaveResult',label:'请假结果',sort:false,hidden:false},
          {prop:'operate',label:'操作',hidden:false,options:[
              {label:'查看进度',prop:'browser'},
            ]}
        ],
      }
    },
    methods:{

      async handleCourse(index,row,customType){
        let g=this;
        g.showDialog=true;
        g.currentLeave={};
        g.$nextTick(()=>{
          g.$set(g.currentLeave,'judgeName',row.judgeName);
          g.$set(g.currentLeave,'create',new Date(row['createTime']).Format('yyyy-MM-dd hh:mm'))
          if (row.validFlag===0){
            g.$set(g.currentLeave,'judge',false);
          }else{
            g.$set(g.currentLeave,'judge',true);
            g.$set(g.currentLeave,'judgeTime',new Date(row['judgeTime']).Format('yyyy-MM-dd hh:mm'));
          }
        })

      },
      async loadAllleaves(){
        let leavesBo = {
          studentNo: this.$store.getters.userId
        }
        return this.$ajaxGet('/leave/getAllLeaves',leavesBo)

      },

      async loadList(){
        let g=this;
        let res=await  this.loadAllleaves();
        g.tableData=res.filter(res=>{
          if (!g.isNullOrEmpty(g.startTime)){
            return res.leaveStartTime>g.startTime.getTime();
          }
          return true;
        }).filter(data=>{
          if (!g.isNullOrEmpty(g.validFlag)){
            return res.validFlag===g.validFlag;
          }
          return true;
        })
      },
      search(){
        let g=this;
        g.tableData=[];
        g.loadList();
      },



    },
    created() {
      this.loadList();

    },
  }
</script>

<style scoped>

</style>
